<template>
  <div class="tobBtoC">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">TOB-TOC</div>
      </div>
      <!-- <div class="fr">
        <el-button
          @click="$router.push({path:'/budget/newUpToDownOrganizationRecord'})"
          size="small"
        >编制记录</el-button>
      </div>-->
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="70px" class="formList">
        <template>
          <el-form-item :label="'预算' + tType">
              <el-date-picker v-model="form.year" :type="tYear" :placeholder="'选择' + tHint" :value-format="fFormat"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="预算年度" v-if="activeName == 'third'">
            <el-date-picker v-model="form.year" type="year" placeholder="选择年" value-format="yyyy"></el-date-picker>
          </el-form-item>
          <el-form-item label="预算账期" v-else>
            <el-date-picker v-model="form.year" type="month" placeholder="选择账期" value-format="yyyyMM"></el-date-picker>
          </el-form-item> -->
        </template>
        <el-form-item label="区域">
          <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="数据来源">
          <el-select v-model="form.resourceId" placeholder="请选择">
            <el-option v-for="(item,index) in resourceList" :key="index" :label="item.resourceName" :value="item.resourceId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btnBox">
          <div>
            <el-button size="small" type="primary" @click="search">查询</el-button>
          </div>
          <div>
            <el-button size="small" style="margin-left: 10px" type="orange" @click="exportModal">导出</el-button>
          </div>
          <!-- <el-upload
            class="upload-demo"
            action="/api/budgetIncome/importData"
            :limit="3"
            :data="params"
            :on-success="importTarget"
            :on-progress="progress"
            :on-error="errorUpload"
            :show-file-list="false"
          >
            <el-button size="small" type="orange">导入</el-button>
          </el-upload>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content clearfix">
      <!-- <div class="table-header">
        <p class="table-title">
          <span v-if="fileName"></span>
          {{fileName}}
        </p>
        <div class="fr btn-right">
          <el-button size="small" style="margin-left: 10px" @click="exportModal">模版下载</el-button>
          <el-upload
            class="upload-demo"
            action="/api/budgetIncome/importData"
            :limit="3"
            :data="params"
            :on-success="importTarget"
            :on-progress="progress"
            :on-error="errorUpload"
            :show-file-list="false"
          >
            <el-button size="small" type="orange">导入</el-button>
          </el-upload>
        </div>
      </div>-->
      <div class="content">
        <span class="fileName">{{fileName}}</span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="分区域跟踪" name="first">
            <tab1 :rowData="tableData" :colDefList="colDefList" ref="tab1"></tab1>
          </el-tab-pane>
          <el-tab-pane label="分项收入增长及拉动跟踪" name="second">
            <tab2 :rowData="tableData" :colDefList="colDefList" ref="tab2"></tab2>
          </el-tab-pane>
          <el-tab-pane label="趋势跟踪" name="third">
            <tab3 :rowData="tableData" :colDefList="colDefList" ref="tab3"></tab3>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import prefixAPI from '@/api/prefixAPI';
import { getCookie } from '@/common/js/cookie';
import { getSessionStorage } from '@/common/js/storage';
import { $budgetAPI } from '@/api';
import tab1 from './toBtoC-tab1';
import tab2 from './toBtoC-tab2';
import tab3 from './toBtoC-tab3';
export default {
    name: 'tobBtoC',
    components: {
        tab1,
        tab2,
        tab3
    },
    data() {
        return {
            form: {
                year: '',
                areaId: '',
                resourceId: false
            },
            resourceList: [
                {
                    resourceName: '系统测算',
                    resourceId: false
                }
                // {
                //   resourceName: "经营单元导入",
                //   resourceId: true
                // }
            ],
            activeName: 'first',
            fileName: '',
            flag: 1,
            accountInfo: '',
            tableData: [],
            colDefList: [],
            tType: '账期',
            tYear: 'month',
            tHint: '账期',
            fFormat: 'yyyyMM',
        };
    },
    computed: {
        params() {
            let obj = {
                token: getCookie('token'),
                areaId: this.form.areaId,
                year: this.form.year
            };
            return obj;
        },
        areaSelect() {
            return this.form.areaSelect;
        }
    },
    created() {
        // if (this.$route.query.row) {
        //   let row = this.$route.query.row;
        //   this.form.areaId = row.areaId;
        //   this.form.year = row.accMonth;
        //   this.resourceId = true;
        // } else {
        //   this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        //   this.form.areaId = this.accountInfo.areaId;
        //   this.form.year = this.moment().format("YYYYMM");
        // }
    },
    mounted() {
        if (this.$route.query.row) {
            let row = this.$route.query.row;
            this.form.areaId = row.areaId;
            this.form.year = row.accMonth;
            this.resourceId = true;
            this.init();
        } else {
            this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
            this.form.areaId = this.accountInfo.areaId;
            // this.form.year = this.moment().format("YYYYMM");
            $budgetAPI.toBtoCmonth(
                {},
                res => {
                    if (res || res.code == 0) {
                        this.form.year = res.content;
                        this.init();
                    }
                },
                err => {}
            );
        }
    },
    methods: {
        errorUpload(err, file, fileList) {
            console.log(err);
            this.loading.close();
        },
        progress(event, file, fileList) {
            this.loading = this.$loading({
                lock: true,
                text: '正在导入',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
        //导入成功的回调
        importTarget(response, file, fileList) {
            this.alertError(response);
            this.loading.close();
            if (response.code == 0) {
                this.$message({
                    type: 'success',
                    message: '导入成功'
                });
                this.form.resourceId = true;
                this.search();
            }
        },
        //查询
        search() {
            let params = {
                year: this.form.year,
                importFlag: this.form.resourceId,
                areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
                flag: this.flag
            };
            this.listResourceData(params);
        },
        //导出
        exportModal() {
            let areaId = this.form.areaId;
            let year = this.form.year;
            let token = getCookie('token');

            if (this.flag == 1) {
                // 根据不同模式切换不同的路径
                if (process.env.NODE_ENV == 'development') {
                    window.location.href =
                        prefixAPI.loc + '/api/mainCampIncome/downloadTemplate?areaId=' + areaId + '&importFlag=false&year=' + year + '&token=' + token;
                } else if (process.env.NODE_ENV == 'production') {
                    window.location.href =
                        prefixAPI.hp + '/api/mainCampIncome/downloadTemplate?areaId=' + areaId + '&importFlag=false&year=' + year + '&token=' + token;
                }
            } else if (this.flag == 2) {
                // 根据不同模式切换不同的路径
                if (process.env.NODE_ENV == 'development') {
                    window.location.href =
                        prefixAPI.loc + '/api/mainIncomeTrack/downloadTemplate?areaId=' + areaId + '&importFlag=false&year=' + year + '&token=' + token;
                } else if (process.env.NODE_ENV == 'production') {
                    window.location.href =
                        prefixAPI.hp + '/api/mainIncomeTrack/downloadTemplate?areaId=' + areaId + '&importFlag=false&year=' + year + '&token=' + token;
                }
            } else if (this.flag == 3) {
                // 根据不同模式切换不同的路径
                if (process.env.NODE_ENV == 'development') {
                    window.location.href = prefixAPI.loc + '/api/customerIncome/export?areaId=' + areaId + '&importFlag=false&year=' + year.substr(0, 4) + '&token=' + token;
                } else if (process.env.NODE_ENV == 'production') {
                    window.location.href = prefixAPI.hp + '/api/customerIncome/export?areaId=' + areaId + '&importFlag=false&year=' + year.substr(0, 4) + '&token=' + token;
                }
            }
        },
        listResourceData(params) {
            switch (params.flag) {
                case 1:
                    this.$refs.tab1.tableLoading = true;
                    $budgetAPI.getMainlistResourceData(
                        params,
                        res => {
                            if (res.code == 0) {
                                this.tableData = [];
                                this.colDefList = [];
                                this.tableData = res.content.data;
                                this.colDefList = res.content.colDefList;
                                this.fileName = res.content.fileName;
                                setTimeout(() => {
                                    this.$refs.tab1.init();
                                    this.$refs.tab1.tableLoading = false;
                                }, 500);
                            } else {
                                this.alertError(res);
                            }
                        },
                        err => {}
                    );
                    break;
                case 2:
                    this.$refs.tab2.tableLoading = true;
                    params.flag = 1;
                    $budgetAPI.getlistResourceData(
                        params,
                        res => {
                            if (res.code == 0) {
                                this.tableData = [];
                                this.colDefList = [];
                                this.tableData = res.content.data;
                                this.colDefList = res.content.colDefList;
                                this.fileName = res.content.fileName;
                                setTimeout(() => {
                                    this.$refs.tab2.init();
                                    this.$refs.tab2.tableLoading = false;
                                }, 500);
                            } else {
                                this.alertError(res);
                            }
                        },
                        err => {}
                    );
                    break;
                case 3:
                    this.$refs.tab3.tableLoading = true;
                    $budgetAPI.getCustomerIncome(
                        params,
                        res => {
                            if (res.code == 0) {
                                this.tableData = [];
                                this.colDefList = [];
                                res.content.data.map(it => {
                                    it.dataList.map((item, i) => {
                                        it[item.month + item.year] = item.indexValue;
                                    });
                                });
                                this.tableData = res.content.data;
                                this.colDefList = this.afterData(res.content.titles);
                                // this.fileName = res.content.fileName;
                                setTimeout(() => {
                                    this.$refs.tab3.init();
                                    this.$refs.tab3.tableLoading = false;
                                }, 500);
                            } else {
                                this.alertError(res);
                                this.$refs.tab3.tableLoading = false;
                            }
                        },
                        err => {}
                    );
                    break;
            }
        },
        afterData(val) {
            let tempArr = [];
            let afterData = [];
            for (let i = 0; i < val.length; i++) {
                if (tempArr.indexOf(val[i].year) === -1) {
                    afterData.push({
                        year: val[i].year,
                        origin: [val[i]]
                    });
                    tempArr.push(val[i].year);
                } else {
                    for (let j = 0; j < afterData.length; j++) {
                        if (afterData[j].year == val[i].year) {
                            afterData[j].origin.push(val[i]);
                            break;
                        }
                    }
                }
            }
            return afterData;
        },
        init() {
            if (this.$route.query.row) {
                let row = this.$route.query.row;
                let params = {
                    year: row.accMonth,
                    importFlag: true,
                    areaId: row.areaId,
                    flag: 1
                };
                this.listResourceData(params);
            } else {
                let params = {
                    year: this.form.year,
                    importFlag: this.form.resourceId,
                    areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
                    flag: 1
                };
                this.listResourceData(params);
            }
        },
        //数据点击切换页请求不同的数据
        handleClick(tab, event) {
            let params = {
                year: this.form.year,
                importFlag: this.form.resourceId,
                areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
                flag: null
            };
            if (tab.name == 'first') {
                this.Ttype = '账期'
                this.tYear = 'month'
                this.tHint = '账期'
                this.fFormat = 'yyyyMM'
                params.flag = 1;
                this.flag = 1;
                this.listResourceData(params);
            }
            if (tab.name == 'second') {
                this.Ttype = '账期'
                this.tYear = 'month'
                this.tHint = '账期'
                this.fFormat = 'yyyyMM'
                params.flag = 2;
                this.flag = 2;
                this.listResourceData(params);
            }
            if (tab.name == 'third') {
                this.Ttype = '年度'
                this.tYear = 'year'
                this.tHint = '年'
                this.fFormat = 'yyyy'
                params.flag = 3;
                this.flag = 3;
                // this.form.year = new Date().getFullYear() + '';
                params.year = new Date().getFullYear() + '';
                this.listResourceData(params);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.newUpToDownOrganization {
    .table-content {
        .table-header {
            display: flex;
            justify-content: space-between;
            .btn-right {
                display: flex;
            }
            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;
                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
        .content {
            position: relative;
            .fileName {
                position: absolute;
                right: 0;
                top: 15px;
            }
        }
    }
}
</style>
<style lang="scss">
.tobBtoC {
    .formList {
        .el-form-item.btnBox {
            margin-bottom: 0px;
            width: 24%;
            margin-right: 0;
            .el-form-item__content {
                display: flex;
                width: 100%;
            }
        }
    }
    .upload-demo {
        display: inline-block;
        margin: 0 15px;
    }
}
</style>
